<template>
    <div @touchstart="ts($event)" @touchmove="tc" @touchend="te" @touchcancel="tc">
        <slot></slot>
    </div>
</template>

<script>
//专门用来封装长按事件
export default {
    name:"viewContent",
    data(){
        return {
            timerId:null
        }
    },
    methods:{
        ts(event){
            if(this.timerId!=null){
                return ;
            }
            this.timerId=setTimeout(() => {
                //模拟长按事件
                event.preventDefault();  //阻止事件的默认行为  它就没有click事件
                this.$emit("longpress",event);
                clearTimeout(this.timerId);
                this.timerId=null;
            }, 600);
        },
        tc(){
            clearTimeout(this.timerId);
            this.timerId=null;
        },
        //触摸结束
        te(){
            //如果你没有超过600毫秒  说明你不是长按 说明是点击事件
            if(this.timerId!=null){
                clearTimeout(this.timerId);
                this.timerId=null;
                this.$emit("click");
            }
        }
    }
}
</script>

<style>

</style>
